<template>
  <div class="form-main-div">
    <section class="form-div">
      <h3>欢迎使用我们的管理系统</h3>
      <!-- 需要用上表单校验时：rules，ref必不可少 -->
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="0px"
        label-position="left"
        class="demo-ruleForm"
        @submit.prevent="doSubmit"
      >
        <!-- 需要用上表单校验：prop和lable必不可少  -->
        <el-form-item prop="mobile" label="">
          <el-input
            v-model="formData.mobile"
            placeholder="请输入电话号码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-button type="primary" native-type="submit">登录</el-button>
      </el-form>
    </section>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>(); 

const formData = reactive({
  mobile: "",
  password: "",
});

const rules = reactive<FormRules>({
  mobile: [
    {
      required: true,
      message: "请输入手机号码",
      trigger: "blur",
    },
    {
      min: 11,
      max: 11,
      message: "请填写11位长的手机号码",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 19, message: "请填写6-19位的密码", trigger: "blur" },
  ],
});

const doSubmit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            console.log("校验成功！")
        }
    })
}

</script>
<style scoped>
.form-main-div {
  background-color: #333333;
  width: 100vw;
  height: 100vh;
}

.form-div {
  background: #ffffff;
  padding: 40px 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.el-form-item {
  padding-bottom: 5px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}
</style>
